<template>
 <div class="container">
   <div class="message"><i class="el-icon-info"><span class="text">数据一共{{count}}条</span></i></div>
     <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="200px"
      >
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="100px"
     >
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="100px"
      >
    </el-table-column>
    <el-table-column
      label="题型"
      width="100px"
      >

      <!-- questionType===1?'单选':(questionType===2?'多选':'简答') -->
      <template v-slot='scope'>
        {{scope.row.questionType===1?'单选':(scope.row.questionType===2?'多选':'简答') }}

      </template>
    </el-table-column>
    <el-table-column
      label="题干"
      width="300px"
      >
      <template v-slot='scope'>
        <div v-html="scope.row.question"></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width="200px"
      >
    </el-table-column>
    <el-table-column
      label="难度"
      >
      <template v-slot='scope'>
        {{scope.row.difficulty===1?'简单':(scope.row.difficulty===2?'一般':'困难') }}

      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"

      >
    </el-table-column>
    <el-table-column
    label="审核状态"
    width="100px"
    >
    <template v-slot='scope'>
      {{scope.row.chkState===0?'待审核':(scope.row.chkState===1?'通过':'拒绝')}}
    </template>
    </el-table-column>
    <el-table-column
    prop="chkRemarks"
    label="审核意见"
    >
    </el-table-column>
    <el-table-column
    label="审核人"
    prop="chkUser"
    >
    </el-table-column>
    <el-table-column
    label="发布状态"
    >
    <template v-slot='scope'>
      {{scope.row.publishState===0?'已下架':(scope.row.publishState===1?'已发布':'待发布')}}
    </template>
    </el-table-column>
    <el-table-column
      fixed='right'
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="SHbtn(scope.row)">审核</el-button>
        <el-button type="text" size="small" @click="updataxg(scope.row.id)">修改</el-button>
        <el-button type="text" size="small" @click="pub(scope.row)">{{scope.row.publishState===0?'上架':'下架'}}</el-button>
        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 <div class="pagination">
    <el-pagination
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     :page-size="10"
      layout=" prev, pager, next,sizes,jumper"
      :total="count">
    </el-pagination>
 </div>
 <!-- 弹出层 -->
  <questionChoiceDialog :dialogVisible='dialogVisible' :nowDetilequestion='nowDetilequestion'></questionChoiceDialog>
  <!-- 审核弹出层 -->
  <el-dialog title="题目审核" :visible.sync="dialogFormVisible" width='400px'>
  <el-form :model="SHform" >
    <el-form-item label="" >
<el-radio-group v-model="SHform.isok">
      <el-radio label="通过"></el-radio>
      <el-radio label="拒绝"></el-radio>
    </el-radio-group>
    </el-form-item>
    <el-form-item label="" >
      <el-input type="textarea" v-model="SHform.desc" placeholder="通过审核意见"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="doSHSubmit">确 定</el-button>
  </div>
</el-dialog>
 </div>
</template>

<script>

import { choice, choiceCheck, choicePublish, remove, detail } from '@/api/hmmm/questions.js'
import questionChoiceDialog from '../qusetionChoiceDialog'
export default {
  props: {
    newtableList: {
      type: Array,
      default () {
        return []
      }
    },
    newcount: {
      type: Number
    }
  },
  components: {
    questionChoiceDialog
  },
  methods: {
    updataxg (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 打开预览弹出层
    handleClick (row) {
      this.dialogVisible.isShow = true
      this.nowDetilequestion = row
      detail({ id: row.id }).then(res => {
        console.log(res)
      })
      // console.log(row)
    },
    // 切换页数发送新的列表请求
    handleCurrentChange (val) {
      this.$emit('changePage', val)
    },
    // 每页条数改变
    handleSizeChange (val) {
      this.$emit('changePage', val)
    },
    // 获取题库的列表
    getChoiceList () {
      choice({ page: 1, pagesize: 10 }).then(res => {
        console.log(res.data.items)
        this.tableData = res.data.items
        this.count = res.data.counts
      })
    },
    btn (scope) {
      console.log(scope)
    },
    // 审核提交
    doSHSubmit () {
      this.dialogFormVisible = false
      choiceCheck({ id: this.SHobj.id, chkState: this.SHform.isok === '通过' ? 1 : 2, chkRemarks: this.SHform.desc }).then(res => {
        console.log(res)
      })
    },
    // 审核按钮
    SHbtn (row) {
      this.dialogFormVisible = true
      this.SHobj = row
    },
    // 上下架
    pub (row) {
      console.log(row)
      choicePublish({ id: row.id, publishState: row.publishState === 0 ? 1 : 0 }).then(res => {
        console.log(res)
        this.getChoiceList()
      })
    },
    // 删除精选试题
    del (id) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '删除操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id }).then(res => {
          console.log(res)
          this.getChoiceList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  },
  created () {
    this.getChoiceList()
  },

  data () {
    return {
      tableData: [], // 表格渲染数据
      count: 0, // 分页的总数
      dialogVisible: {
        isShow: false
      }, // 预览弹出层的控制
      nowDetilequestion: {}, // 预览用到的信息对象
      dialogFormVisible: false, // 审核弹出层的控制
      SHform: {
        isok: '',
        desc: ''
      }, // 审核弹出层的绑定数据
      SHobj: {}
    }
  },

  watch: {
    newtableList: {
      deep: true,
      handler (val) {
        console.log(val)
        // this.$nextTick(() => {
        this.tableData = val
        // })
        console.log(this.tableData)
      }
    },
    newcount (val) {
      this.count = val
    }
  }

}
</script>

<style scoped lang='scss'>
.message{
  background-color: #f4f4f5;
  color: #909399;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  .text{
    margin-left: 10px;
  }
}
.pagination{
  margin-top: 10px;
float: right;
}

</style>
